<template>
  <div>
    <Card>
      <tables ref="tables" editable searchable search-place="top" v-model="tableData" :columns="columns" @on-delete="handleDelete"></tables>
    </Card>
    <Modal
      v-model="modalVisible"
      title="编辑信息"
      @on-cancel="closeModel">
      <Form :model="currentItem" label-position="top">
        <FormItem label="名称">
          <Input v-model="currentItem.name" />
        </FormItem>
        <FormItem label="价格">
          <Input v-model="currentItem.email" />
        </FormItem>
        <FormItem label="创建时间">
          <DatePicker v-model="currentItem.createTime" type="date" placeholder="选择日期"></DatePicker>
        </FormItem>
        <FormItem label="房间号">
          <Input v-model="currentItem.house_id" />
        </FormItem>
        <FormItem label="房屋图片">
          <img :src="currentItem.house_img" class="img-thumbnail" />
        </FormItem>
        <FormItem label="房屋描述">
          <Input v-model="currentItem.house_desc" type="textarea" />
        </FormItem>
        <FormItem label="电话">
          <Input v-model="currentItem.telephone" />
        </FormItem>
        <FormItem label="价格">
          <Input v-model="currentItem.price" />
        </FormItem>
        <FormItem label="描述文本">
          <Input v-model="currentItem.descTxt" type="textarea" />
        </FormItem>
      </Form>
      <div slot="footer">
        <Button type="primary" @click="saveItem">保存</Button>
        <Button @click="closeModel">取消</Button>
      </div>
    </Modal>
  </div> 
</template>

<script>
import Tables from '_c/tables'
// import { getTableData } from '@/api/data'
export default {
  name: 'tables_page',
  components: {
    Tables
  },
  data () {
    return {
      columns: [
        { title: '名称', key: 'name', sortable: true },
        { title: '价格', key: 'email', editable: true },
        { title: 'Create-Time', key: 'createTime' },
        { title: 'house_id', key: 'house_id' },
        { title: 'house_img', key: 'house_img', render: (h, params) => { return h('div', [h('img', {class:'img-thumbnail',attrs:{'src':params.row.house_img}})]) }},
        { title: 'house_desc', key: 'house_desc' },
        { title: 'telephone', key: 'telephone' },
        { title: 'price', key: 'price' },
        { title: 'descTxt', key: 'descTxt' },
        {
          title: 'Handle',
          key: 'handle',
          button: [
            (h, params) => {
              return h('div', [
                h('Button', {
                  props: { type: 'primary', size: 'small' },
                  style: { marginRight: '5px' },
                  on: { click: () => this.handleEdit(params) }
                }, '编辑'),
                h('Poptip', {
                  props: { confirm: true, title: '你确定要删除吗?' },
                  on: { 'on-ok': () => this.handleDelete(params) }
                }, [
                  h('Button', { props: { type: 'error', size: 'small' } }, '删除')
                ])
              ]);
            }
          ]
        }
      ],
      modalVisible: false, 
      currentItem: {}, 
      tableData: [
        { name: '产品1', email: 'user1@example.com', createTime: '2024-11-11T08:00:00Z', house_id: '001', house_img: 'http://example.com/img1.jpg', house_desc: '舒适住宅1', telephone: '123-456-7890', price: '2999', descTxt: '产品详细描述1' },
        { name: '产品2', email: 'user2@example.com', createTime: '2024-11-12T09:00:00Z', house_id: '002', house_img: 'http://example.com/img2.jpg', house_desc: '豪华别墅2', telephone: '987-654-3210', price: '4999', descTxt: '产品详细描述2' },
        { name: '产品3', email: 'user3@example.com', createTime: '2024-11-13T10:00:00Z', house_id: '003', house_img: 'http://example.com/img3.jpg', house_desc: '现代公寓3', telephone: '555-555-5555', price: '3299', descTxt: '产品详细描述3' },
        { name: '产品4', email: 'user4@example.com', createTime: '2024-11-14T11:00:00Z', house_id: '004', house_img: 'http://example.com/img4.jpg', house_desc: '海滨别墅4', telephone: '444-444-4444', price: '5999', descTxt: '产品详细描述4' },
        { name: '产品5', email: 'user5@example.com', createTime: '2024-11-15T12:00:00Z', house_id: '005', house_img: 'http://example.com/img5.jpg', house_desc: '乡村小屋5', telephone: '777-777-7777', price: '1999', descTxt: '产品详细描述5' },
        { name: '产品6', email: 'user6@example.com', createTime: '2024-11-16T13:00:00Z', house_id: '006', house_img: 'http://example.com/img6.jpg', house_desc: '城市塔楼6', telephone: '888-888-8888', price: '2499', descTxt: '产品详细描述6' },
        { name: '产品7', email: 'user7@example.com', createTime: '2024-11-17T14:00:00Z', house_id: '007', house_img: 'http://example.com/img7.jpg', house_desc: '历史建筑7', telephone: '999-999-9999', price: '3999', descTxt: '产品详细描述7' },
        { name: '产品8', email: 'user8@example.com', createTime: '2024-11-18T15:00:00Z', house_id: '008', house_img: 'http://example.com/img8.jpg', house_desc: '现代豪宅8', telephone: '123-321-9876', price: '4499', descTxt: '产品详细描述8' },
        { name: '产品9', email: 'user9@example.com', createTime: '2024-11-19T16:00:00Z', house_id: '009', house_img: 'http://example.com/img9.jpg', house_desc: '简约公寓9', telephone: '456-654-1230', price: '2799', descTxt: '产品详细描述9' },
        { name: '产品10', email: 'user10@example.com', createTime: '2024-11-20T17:00:00Z', house_id: '010', house_img: 'http://example.com/img10.jpg', house_desc: '豪华套房10', telephone: '789-987-6543', price: '5299', descTxt: '产品详细描述10' }
      ]
    }
  },
  methods: {
    handleDelete (params) {
      console.log(params)
    },
    handleEdit(params) {
      this.currentItem = {...params.row}; 
      this.modalVisible = true;
    },
    handleDelete(params) {
      console.log(params)
    },
    saveItem() {
      this.modalVisible = false; 
    },
    closeModel() {
      this.modalVisible = false;
    },
  },
  mounted () {
    getTableData().then(res => {
      this.tableData = res.data
    })
  }
}
</script>
<style>
</style>
